﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Minesweeper</title>
        <script src="Scripts/jquery-2.0.2.min.js"></script>
        <script src="Scripts/jquery-ui-1.10.3.js"></script>
        <script src="Scripts/ProtoClass.js"></script>
        <script src="Scripts/jquery.playSound.js"></script>
        <script src="Scripts/jquery.timer.js"></script>
        <link rel="shortcut icon" href="Images/mine-red-25.png" />
        <link href="css/start/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
        <link href="Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" />
        <link href="style-test.css" rel="stylesheet"/>
        <style>
            @font-face
            {
            font-family: DS-Digital;
            src: url('Fonts/DS-DIGIB.TTF')
            }

            body {
                overflow: hidden;
                background-image: url(Images/background.jpg);
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
                -moz-background-size: cover;
                -o-background-size: cover;
                -webkit-background-size: cover;
                background-size: cover;
            }

            #container {
                width: 850px;
                height: 600px;
                margin: 45px auto;
            }

            #game-board table
            {
                border-collapse: collapse;
                margin: 0 auto;
                background: #000;
                outline: 5px solid #ffffff;
                /*-webkit-box-shadow: 0px 0px 20px #fff;
                box-shadow: 0px 0px 20px #fff;*/
            }

            .open {
                background-color: red;
                -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
                -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
                box-shadow: inset 0px 1px 0px 0px #ffffff;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
                background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
                background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
                background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
                background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
                background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                border-radius: 6px;
                /*border: 1px solid #dcdcdc;*/
                -webkit-text-shadow: 0px 1px 0px #ffffff;
                text-shadow: 0px 1px 0px #ffffff;
            }
            
            .flag
            {
                background-image: url(Images/flag-25.png);
            }

            .question
            {
                background-image: url(Images/question-25.png);
            }
    
            .mine
            {
                -moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
                -webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
                box-shadow:inset 0px 1px 0px 0px #fff6af;
                background: url(Images/mine-gray-25.png), -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
                background: url(Images/mine-gray-25.png), -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
                background: url(Images/mine-gray-25.png), -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
                background: url(Images/mine-gray-25.png), -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
                background: url(Images/mine-gray-25.png), -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
                background: url(Images/mine-gray-25.png), linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
                background-color:#ffec64;
                -moz-border-radius:6px;
                -webkit-border-radius:6px;
                border-radius:6px;
                /*border:1px solid #ffaa22;*/
                -webkit-text-shadow: 0px 1px 0px #ffffff;
                text-shadow: 0px 1px 0px #ffffff;
            }

            #game-board table tbody tr td {
                width: 25px;
                height: 25px;
                text-align: center;
                cursor: pointer;
                -moz-box-shadow: inset 0px 1px 0px 0px #bee2f9;
                -webkit-box-shadow: inset 0px 1px 0px 0px #bee2f9;
                box-shadow: inset 0px 1px 0px 0px #bee2f9;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
                background: -moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
                background: -webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
                background: -o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
                background: -ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
                background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0);
                background-color: #63b8ee;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                border-radius: 6px;
                border: 1px solid #000;
                font-size: 16px;
                font-weight: bolder;
                font-family:'Arial Black', Gadget, sans-serif;
                -webkit-text-shadow: 0px 1px 0px #7cacde;
                text-shadow: 0px 1px 0px #7cacde;
            }
            #game-board table tbody tr td:not(.open):not(.flag):not(.question):not(.mine):hover {
                background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
                background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
                background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
                background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
                background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
                background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0);
                background-color:#468ccf;
            }
            #game-board table tbody tr td:not(.open):not(.flag):not(.question):not(.mine):active {
                position:relative;
                top:1px;
            }

            #top-nav, #bottom-nav {
                text-align: center;
                padding-bottom: 20px;
                display: none;
                font-weight: bold;
                color: white;
                
            }
            #bottom-nav {
                margin-top: 20px;
            }

            #remaining-mines, #remaining-blocks {
                padding: 5px;
                background: black;
                font-family: DS-Digital;
                font-size: 20px;
                display: inline-block;
                -webkit-box-shadow: 0px 0px 10px #fff;
                box-shadow: 0px 0px 10px #fff;
                border: 3px double #808080;
                width: 80px;

            }

            #timer {
                background-image: url(Images/clock.png);
                background-repeat: no-repeat;
                padding-top: 15px;
                width: 100px;
                height: 32px;
                font-family: DS-Digital;
                font-size: 20px;
                display: inline-block;
                vertical-align:text-bottom;
            }



        </style>
    </head>
    <body>
        <!--<div id="begin-game">
            <div id="level">Choose Level</div>
            <div>
                <input type="button" value="easy" class="button" id="easy" />
            </div>
            <div>
                <input type="button" value="medium" class="button" id="medium"/>
            </div>
            <div>
                <input type="button" value="hard" class="button" id="hard"/>
            </div>
        </div>

        <div id="container">
            <div id="top-nav">
                <span id="timer"></span>
            </div>
            <div id="game-board"></div>
            <div id="bottom-nav">
                <span id="remaining-mines"></span>
                <span id="remaining-blocks"></span>
            </div>
        </div>-->

        <div id="scoreboard"></div>

        <!--<div id="fb-root"></div>

        <button id = "share_button">Share on Facebook</button>-->

        <script src="script-new-engine-test.js"></script>

    </body>
</html>
